<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>隐藏密码</title>
  <script src="https://lib.baomitu.com/vue/2.6.12/vue.common.dev.js"></script>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    #app {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    svg {
      width: 100px;
      /* background-color: #ccc; */
      cursor: pointer;
    }

    .eye-ball {
      /* 设定虚线的长度为圆的周长 */
      stroke-dasharray: 100;
      /* 调整虚线的位置 */
      stroke-dashoffset: 100;
      stroke-dashoffset: 0;
      transition: .3s all ease-in-out;
      transition-delay: .1s;
    }

    .hide .eye-ball {
      /* 偏移量设为周长是让圆圈消失 */
      stroke-dashoffset: 100;
      /* stroke-dashoffset: 0; */
      transition-delay: 0;
    }

    .eye-top {
      transition: .3s all ease-in-out;
    }

    .hide .eye-top {
      d: path('M10,50 Q50,90 90,50');
      transition-delay: .2s;
    }

    input[type='text'],
    input[type='password'] {
      height: 50px;
      width: 400px;
      /* 取消鼠标聚焦出现浏览器框线 */
      outline: none;
      padding: 0 10px;
      border: 10px solid #184098;
      border-radius: 6px;
      margin-right: 20px;
      font-size: 24px;
      font-family: Helvetica;
      color: #184098;

      /* 背景一半白色一半蓝色 上蓝下白 */
      background-image: linear-gradient(0deg, #fff 50%, #184098 50%);
      /* 背景纵向放大2倍 */
      background-size: 100% 200%;
      /* 背景沿Y轴向上移动100%，就只能看到下面的白色背景了 */
      background-position: 0 100%;
      transition: .3s all ease-in-out;
      transition-delay: .1s;
    }

    .hide input[type='text'],
    .hide input[type='password'] {
      background-position: 0 200%;
      color: #fff;
    }
  </style>
</head>

<body>
  <!-- 使用svg画一个眼睛 -->
  <div id="app" :class="{hide:isHide}">
    <input :type="type">
    <svg viewBox="0 0 100 100" @click='isHide = !isHide'>
      <path stroke="#184098" fill="none" stroke-linecap='round' stroke-width='10' d='M10,50 Q50,10 90,50'
        class="eye-top">
      </path>
      <path stroke="#184098" fill="none" stroke-linecap='round' stroke-width='10' d='M10,50 Q50,90 90,50'
        class="eye-bottom">
      </path>
      <circle fill='none' stroke="#184098" stroke-width='10' cx='50' cy='50' r='15' stroke-linecap='round'
        class="eye-ball" transform='rotate(90 50 50)'></circle>
    </svg>
  </div>


  <script>
    new Vue({
      el: "#app",
      data: {
        isHide: false,
        type: 'text'
      },
      watch: {
        isHide() {
          setTimeout(() => {
            this.type = this.isHide ? 'password' : 'text'
          }, 200)
        }
      }
    })
  </script>
</body>

</html>